<template>
	<div class="album-res">
		<SingerAlbum :albumlist="albumRes.albums" />
		<Pagination :total="albumCount" :page-size="30" @handleCurrentChange="getSearchAlbumBy" />
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'; 
import { getSearchAlbum } from "@/network/searchdetail/searchdeatil"; // 网络请求方法
import SingerAlbum from "../../singerdetail/Childcomps/SingerAlbum.vue";
import{useRoute}  from 'vue-router';

// 响应式数据
const keywords = ref(""); // 关键词
const albumRes = ref({}); // 专辑
const albumCount = ref(0); // 专辑数量
const route = useRoute(); 
//获取专辑
const getSearchAlbumBy = async (page = 1) => {
  const offset = (page - 1) * 30;
  try {
    const res = await getSearchAlbum(keywords.value, offset);
    albumRes.value = res.data.result;
    albumCount.value = albumRes.value.albumCount;
  } catch (error) {
    console.error('Error fetching albums:', error);
  }
};

onMounted(() => {
  keywords.value = route.params.keywords; 
  getSearchAlbumBy(); 
});


</script>

<style lang="less" scoped>
.result {
	padding: 15px 10px;
}
</style>
